<template>
  <div class="section">
    <div class="header">
      <!-- <img src="../assets/back.png" alt @click="goback" /> -->
      <p>支付失败</p>
    </div>
    <div class="content">
      <p class="successImg">
        <img src="../assets/fail.png" alt />
      </p>
      <p class="payMessage">购买失败!</p>
    </div>
    <!-- <p class="line" v-if="showOrHide"></p>
    <div class="btnArea" v-if="showOrHide">
      <button @click="gobackHome">返回美学频道</button>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOrHide: false
    }
  },
  created() {
    this.iosAndAndroid();
  },
  methods: {
    //  判断ios还是Android，显示和隐藏按钮
    iosAndAndroid() {
      var ua = window.navigator.userAgent,
        app = window.navigator.appVersion;
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // ios端 
        console.log('ios');
        this.showOrHide = false;
      } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        // android端 
        console.log('android端');
        this.showOrHide = false;
      }
    },
    gobackHome() {
      console.log(1);
      window.location.href = 'appLXYdushuhui://';
    }
  },
}
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  border-bottom: 1px solid #eeeeee;
}

.header img {
  position: absolute;
  left: 12px;
  top: 16px;
  width: 11px;
  height: 19px;
  vertical-align: middle;
}

.header p {
  font-size: 18px;
  font-weight: bold;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 32px;
  margin-bottom: 93px;
}

.content .successImg {
  width: 175px;
  height: 175px;
  margin: 0 auto;
}

.content .successImg img {
  width: 100%;
}

.content .payMessage {
  text-align: center;
  font-size: 21px;
  color: #a87631;
  font-weight: 400;
  margin: 12px auto;
}

.line {
  height: 10px;
  background: #e8e8e8;
  box-sizing: border-box;
}

.btnArea {
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  padding: 70px 0;
}

.btnArea button {
  width: 100%;
  outline: none;
  border: none;
  background: linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -webkit-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -o-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -moz-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  border-radius: 26px;
  font-size: 18px;
  font-weight: 400;
  color: #faedd2;
  padding: 8px 0;
}
</style>